import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export const useLazyData = (apiFn) => {
  const goods = ref([])
  const target = ref(null)
  // const {stop} = useIntersectionObserver(target, fn, options)
  // 1、参数一target表示被监听的DOM元素
  // 2、参数二是回调函数，用于通知监听的动作（回调函数的第一个形参isIntersecting表示被监听的元素已经进入了可视区）
  // 3、表示配置选项
  // stop 是停止观察是否进入或移出可视区域的行为
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom

    if (isIntersecting) {
    // 被监听的元素在进入可视区域后再调用接口
      apiFn().then(data => {
        goods.value = data.result

        // 在获取数据之后停止继续监听
        stop()
      })
    }
  })
  return { target, goods }
}
